<template>
	<button
        :class="[
            'cvu-button',
            type ? 'cvu-button-' + type : '',
            size ? 'cvu-button-' + size : '',
            {
                'is-disabled': disabled,
                'is-loading': loading,
                'is-plain': plain,
                'is-round': round,
                'is-circle': circle,
                'is-iconfont': icon
            }
        ]"
        :type="nativeType"
        :disabled="disabled || loading"
        :autofocus="autofocus"
        v-debounce="{isDebounce: isDebounce, debounceTime: debounceTime}"
        @click.stop="_handleClick"
    >
        <i class="iconfont iconloading" v-if="loading"></i>
        <!-- <i :class="['iconfont', icon]" v-if="icon && !loading"></i> -->
        <Icon :type="icon" v-if="icon && !loading" />
        <span v-if="$slots.default">
            <slot></slot>
        </span>
    </button>
</template>

<script>
export default {
    name: 'cvu-button',
    components: {},
    props: {
        // 原生 type 属性 [button / submit / reset]
        nativeType: {
            type: String,
            default: 'button'
        },
        // 类型 [primary / success / warning / danger / info / text]
        type: {
            type: String,
            default: 'default'
        },
        // 尺寸 [medium / small / mini]
        size: String,
        // 图标类名
        icon: {
            type: String,
            default: ''
        },
        loading: Boolean, // 是否加载状态
        disabled: Boolean, // 是否禁用状态
        plain: Boolean, // 是否朴素按钮
        autofocus: { // 是否默认聚焦
            type: Boolean,
            default: false
        },
        // 是否开启防抖(防连点)
        isDebounce: {
            type: Boolean,
            default: false
        },
        // 防抖时间
        debounceTime: {
            type: Number,
            default: 1000
        },
        round: Boolean, // 是否圆角按钮
        circle: Boolean // 是否圆形按钮
    },
    data() {
        return {}
    },
    watch: {},
    directives: {
        // 按钮防抖(防连点)
        debounce: {
            inserted(el, binding) {
                el.addEventListener('click', e => {
                    if(el.disabled) {
                        return false
                    }
                    el.disabled = binding.value.isDebounce
                    setTimeout(() => {
                        el.disabled = false
                    }, binding.value.debounceTime)
                })
            }
        }
    },
    methods: {
        // 按钮点击
        _handleClick(evt) {
            this.$emit('on-click', evt)
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../../style/_index.scss';
.cvu-button{
    display: inline-block;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	background: #FFF;
	border: 1px solid #DCDFE6;
	color: #606266;
	-webkit-appearance: none;
	text-align: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	outline: 0;
	margin: 0;
	-webkit-transition: .1s;
	transition: .1s;
	font-weight: 500;
	user-select: none;
	padding: 12px 20px;
	font-size: 14px;
	border-radius: 4px;
    &.cvu-button + &.cvu-button {
        margin-left: 10px
    }
    &.cvu-button:focus,
    &.cvu-button:hover {
        color: #409EFF;
        border-color: #c6e2ff;
        background-color: #ecf5ff
    }
    &.cvu-button:active {
        color: #3a8ee6;
        border-color: #3a8ee6;
        outline: 0
    }
    &.cvu-button::-moz-focus-inner {
        border: 0
    }
    &.cvu-button [class*=cvu-icon-]+span {
        margin-left: 5px
    }
    &.cvu-button.is-plain:focus,
    &.cvu-button.is-plain:hover {
        background: #FFF;
        border-color: #409EFF;
        color: #409EFF
    }

    &.cvu-button.is-active,
    &.cvu-button.is-plain:active {
        color: #3a8ee6;
        border-color: #3a8ee6
    }

    &.cvu-button.is-plain:active {
        background: #FFF;
        outline: 0
    }

    &.cvu-button.is-disabled,
    &.cvu-button.is-disabled:focus,
    &.cvu-button.is-disabled:hover {
        color: #C0C4CC;
        cursor: not-allowed;
        background-image: none;
        background-color: #FFF;
        border-color: #EBEEF5
    }

    &.cvu-button.is-disabled.cvu-button-text {
        background-color: transparent
    }

    &.cvu-button.is-disabled.is-plain,
    &.cvu-button.is-disabled.is-plain:focus,
    &.cvu-button.is-disabled.is-plain:hover {
        background-color: #FFF;
        border-color: #EBEEF5;
        color: #C0C4CC
    }

    &.cvu-button.is-iconfont{
        padding: 11px 20px;
    }
    &.cvu-button .iconfont, &.cvu-button .ivu-icon{
        position: relative;
        top: 0px;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        font-style: inherit;
        overflow: inherit;
        margin: 0 5px 0 0;
        font-size: 18px;
    }

    &.cvu-button.is-loading {
        position: relative;
        pointer-events: none
    }

    &.cvu-button.is-loading:before {
        pointer-events: none;
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        right: -1px;
        bottom: -1px;
        border-radius: inherit;
        background-color: rgba(255, 255, 255, .35)
    }
    &.cvu-button.is-loading .iconfont{
        top: -1px;
        animation: rotating 2s linear infinite;
    }
    &.cvu-button.is-loading span{
        display: inline-block;
        vertical-align: middle;
    }

    &.cvu-button.is-round {
        border-radius: 20px;
        padding: 12px 23px
    }

    &.cvu-button.is-circle {
        border-radius: 50%;
        padding: 12px
    }

    &.cvu-button-primary {
        color: #FFF;
        background-color: #409EFF;
        border-color: #409EFF
    }

    &.cvu-button-primary:focus,
    &.cvu-button-primary:hover {
        background: #66b1ff;
        border-color: #66b1ff;
        color: #FFF
    }

    &.cvu-button-primary.is-active,
    &.cvu-button-primary:active {
        background: #3a8ee6;
        border-color: #3a8ee6;
        color: #FFF
    }

    &.cvu-button-primary:active {
        outline: 0
    }

    &.cvu-button-primary.is-disabled,
    &.cvu-button-primary.is-disabled:active,
    &.cvu-button-primary.is-disabled:focus,
    &.cvu-button-primary.is-disabled:hover {
        color: #FFF;
        background-color: #a0cfff;
        border-color: #a0cfff
    }

    &.cvu-button-primary.is-plain {
        color: #409EFF;
        background: #ecf5ff;
        border-color: #b3d8ff
    }

    &.cvu-button-primary.is-plain:focus,
    &.cvu-button-primary.is-plain:hover {
        background: #409EFF;
        border-color: #409EFF;
        color: #FFF
    }

    &.cvu-button-primary.is-plain:active {
        background: #3a8ee6;
        border-color: #3a8ee6;
        color: #FFF;
        outline: 0
    }

    &.cvu-button-primary.is-plain.is-disabled,
    &.cvu-button-primary.is-plain.is-disabled:active,
    &.cvu-button-primary.is-plain.is-disabled:focus,
    &.cvu-button-primary.is-plain.is-disabled:hover {
        color: #8cc5ff;
        background-color: #ecf5ff;
        border-color: #d9ecff
    }

    &.cvu-button-success {
        color: #FFF;
        background-color: #67C23A;
        border-color: #67C23A
    }

    &.cvu-button-success:focus,
    &.cvu-button-success:hover {
        background: #85ce61;
        border-color: #85ce61;
        color: #FFF
    }

    &.cvu-button-success.is-active,
    &.cvu-button-success:active {
        background: #5daf34;
        border-color: #5daf34;
        color: #FFF
    }

    &.cvu-button-success:active {
        outline: 0
    }

    &.cvu-button-success.is-disabled,
    &.cvu-button-success.is-disabled:active,
    &.cvu-button-success.is-disabled:focus,
    &.cvu-button-success.is-disabled:hover {
        color: #FFF;
        background-color: #b3e19d;
        border-color: #b3e19d
    }

    &.cvu-button-success.is-plain {
        color: #67C23A;
        background: #f0f9eb;
        border-color: #c2e7b0
    }

    &.cvu-button-success.is-plain:focus,
    &.cvu-button-success.is-plain:hover {
        background: #67C23A;
        border-color: #67C23A;
        color: #FFF
    }

    &.cvu-button-success.is-plain:active {
        background: #5daf34;
        border-color: #5daf34;
        color: #FFF;
        outline: 0
    }

    &.cvu-button-success.is-plain.is-disabled,
    &.cvu-button-success.is-plain.is-disabled:active,
    &.cvu-button-success.is-plain.is-disabled:focus,
    &.cvu-button-success.is-plain.is-disabled:hover {
        color: #a4da89;
        background-color: #f0f9eb;
        border-color: #e1f3d8
    }

    &.cvu-button-warning {
        color: #FFF;
        background-color: #E6A23C;
        border-color: #E6A23C
    }

    &.cvu-button-warning:focus,
    &.cvu-button-warning:hover {
        background: #ebb563;
        border-color: #ebb563;
        color: #FFF
    }

    &.cvu-button-warning.is-active,
    &.cvu-button-warning:active {
        background: #cf9236;
        border-color: #cf9236;
        color: #FFF
    }

    &.cvu-button-warning:active {
        outline: 0
    }

    &.cvu-button-warning.is-disabled,
    &.cvu-button-warning.is-disabled:active,
    &.cvu-button-warning.is-disabled:focus,
    &.cvu-button-warning.is-disabled:hover {
        color: #FFF;
        background-color: #f3d19e;
        border-color: #f3d19e
    }

    &.cvu-button-warning.is-plain {
        color: #E6A23C;
        background: #fdf6ec;
        border-color: #f5dab1
    }

    &.cvu-button-warning.is-plain:focus,
    &.cvu-button-warning.is-plain:hover {
        background: #E6A23C;
        border-color: #E6A23C;
        color: #FFF
    }

    &.cvu-button-warning.is-plain:active {
        background: #cf9236;
        border-color: #cf9236;
        color: #FFF;
        outline: 0
    }

    &.cvu-button-warning.is-plain.is-disabled,
    &.cvu-button-warning.is-plain.is-disabled:active,
    &.cvu-button-warning.is-plain.is-disabled:focus,
    &.cvu-button-warning.is-plain.is-disabled:hover {
        color: #f0c78a;
        background-color: #fdf6ec;
        border-color: #faecd8
    }

    &.cvu-button-danger {
        color: #FFF;
        background-color: #F56C6C;
        border-color: #F56C6C
    }

    &.cvu-button-danger:focus,
    &.cvu-button-danger:hover {
        background: #f78989;
        border-color: #f78989;
        color: #FFF
    }

    &.cvu-button-danger.is-active,
    &.cvu-button-danger:active {
        background: #dd6161;
        border-color: #dd6161;
        color: #FFF
    }

    &.cvu-button-danger:active {
        outline: 0
    }

    &.cvu-button-danger.is-disabled,
    &.cvu-button-danger.is-disabled:active,
    &.cvu-button-danger.is-disabled:focus,
    &.cvu-button-danger.is-disabled:hover {
        color: #FFF;
        background-color: #fab6b6;
        border-color: #fab6b6
    }

    &.cvu-button-danger.is-plain {
        color: #F56C6C;
        background: #fef0f0;
        border-color: #fbc4c4
    }

    &.cvu-button-danger.is-plain:focus,
    &.cvu-button-danger.is-plain:hover {
        background: #F56C6C;
        border-color: #F56C6C;
        color: #FFF
    }

    &.cvu-button-danger.is-plain:active {
        background: #dd6161;
        border-color: #dd6161;
        color: #FFF;
        outline: 0
    }

    &.cvu-button-danger.is-plain.is-disabled,
    &.cvu-button-danger.is-plain.is-disabled:active,
    &.cvu-button-danger.is-plain.is-disabled:focus,
    &.cvu-button-danger.is-plain.is-disabled:hover {
        color: #f9a7a7;
        background-color: #fef0f0;
        border-color: #fde2e2
    }

    &.cvu-button-info {
        color: #FFF;
        background-color: #909399;
        border-color: #909399
    }

    &.cvu-button-info:focus,
    &.cvu-button-info:hover {
        background: #a6a9ad;
        border-color: #a6a9ad;
        color: #FFF
    }

    &.cvu-button-info.is-active,
    &.cvu-button-info:active {
        background: #82848a;
        border-color: #82848a;
        color: #FFF
    }

    &.cvu-button-info:active {
        outline: 0
    }

    &.cvu-button-info.is-disabled,
    &.cvu-button-info.is-disabled:active,
    &.cvu-button-info.is-disabled:focus,
    &.cvu-button-info.is-disabled:hover {
        color: #FFF;
        background-color: #c8c9cc;
        border-color: #c8c9cc
    }

    &.cvu-button-info.is-plain {
        color: #909399;
        background: #f4f4f5;
        border-color: #d3d4d6
    }

    &.cvu-button-info.is-plain:focus,
    &.cvu-button-info.is-plain:hover {
        background: #909399;
        border-color: #909399;
        color: #FFF
    }

    &.cvu-button-info.is-plain:active {
        background: #82848a;
        border-color: #82848a;
        color: #FFF;
        outline: 0
    }

    &.cvu-button-info.is-plain.is-disabled,
    &.cvu-button-info.is-plain.is-disabled:active,
    &.cvu-button-info.is-plain.is-disabled:focus,
    &.cvu-button-info.is-plain.is-disabled:hover {
        color: #bcbec2;
        background-color: #f4f4f5;
        border-color: #e9e9eb
    }

    &.cvu-button-text,
    &.cvu-button-text.is-disabled,
    &.cvu-button-text.is-disabled:focus,
    &.cvu-button-text.is-disabled:hover,
    &.cvu-button-text:active {
        border-color: transparent
    }

    &.cvu-button-medium {
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 4px
    }

    &.cvu-button-mini,
    &.cvu-button-small {
        font-size: 12px;
        border-radius: 3px
    }

    &.cvu-button-medium.is-round {
        padding: 10px 20px
    }

    &.cvu-button-medium.is-circle {
        padding: 10px
    }

    &.cvu-button-small,
    &.cvu-button-small.is-round {
        padding: 9px 15px
    }

    &.cvu-button-small.is-circle {
        padding: 9px
    }

    &.cvu-button-mini,
    &.cvu-button-mini.is-round {
        padding: 7px 15px
    }

    &.cvu-button-mini.is-circle {
        padding: 7px
    }

    &.cvu-button.cvu-button-text {
        color: #409EFF;
        background: 0 0;
        padding-left: 0;
        padding-right: 0
    }

    &.cvu-button-text:focus,
    &.cvu-button-text:hover {
        color: #66b1ff;
        border-color: transparent;
        background-color: transparent
    }

    &.cvu-button-text:active {
        color: #3a8ee6;
        background-color: transparent
    }
}
</style>
